<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
			*{
				/* 盒模型、字体、去掉超链接下划线 */
				margin: 0;
				padding: 0;
				font-size: 16px;
				color: #000;
				font-family: 微软雅黑;
				text-decoration: none;/* 去掉下划线 */
				list-style: none;/* 去掉原点、数字等默认标记 */
				color: #fff;
			}
			/* 1.左栏外层：宽高、背景颜色 */
			article{
				width: 235px;
				height: 470px;
				background-color: #949494;
			}
			/* 2.左栏内层ul li：登高、定宽、垂直水平居中、颜色、相对定位【钩点位】 */
			article ul.sidebar{
				width: 220px;
				height: 47px;
				bor der: 1px solid red;
				line-height: 47px;
				text- align: center;
				margin: 10px;
			}
			article ul.sidebar li:hover{
				background-color: #ffaa00;
				color: #fff;
			}
			/* 3.弹出框   扎到ul、li第一行，加div.outer*/
			article ul.sidebar div.outer{
				width: 500px;
				height: 470px;
				bor der: 1px solid red;
				position: absolute;/* absolute绝对定位   relative相对定位 */
				left: 235px;
				z-index: 999;/* 堆叠属性 */
				/* 学习JQuery框架：显示与隐藏：动态 */
				display: block;
			}
			.article li{
				list-style: none;
				margin: 0;
				display: flex;
				justify-content: space-between;
				counter-reset: #fff;
			}
			span{
				color:#fff;
				float: right;
			}
		</style>
	</head>
	<body>
		<!-- 左栏外围：语义化元素/结构化标记等同于div+别名的形式，优点：有利于SEO优化 
		article元素：独立的内容区域空间，使用场景：新闻区域、博客区域、左栏等-->
		<article>
			<ul class="sidebar">
				<!-- 挂靠钩点位 -->
				<div class="outer"></div>
				<li>手机 平板 电话卡<a href="#"></a><span>></span></li>
				<li>电视 盒子<a href="#"><span>></span></li>
				<li>路由器 智能硬件<a href="#"><span>></span></li>
				<li>移动电源 插线板<a href="#"><span>></span></li>
				<li>耳机 音响<a href="#"><span>></span></li>
				<li>电池 存储卡<a href="#"><span>></span></li>
				<li>保护套<a href="#"><span>></span></li>
				<li>贴膜<a href="#"><span>></span></li>
				<li>其他<a href="#"><span>></span></li>
				<li>其他周边<a href="#"><span>></span></li>
			</ul>
		</article>
	</body>
</html>